<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智习伴 - 教师端</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
    <link rel="stylesheet" href="static/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="bg-gray-100 bg-pattern">
    <div class="min-h-screen">
        <!-- 头部导航 -->
        <nav class="bg-white shadow">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between h-16">
                    <div class="flex">
                        <div class="flex-shrink-0 flex items-center">
                            <h1 class="text-xl font-bold text-gray-800">智习伴 - 教师端</h1>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <button id="logoutBtn" class="ml-4 px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900">
                            退出登录
                        </button>
                    </div>
                </div>
            </div>
        </nav>

        <!-- 主要内容 -->
        <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
            <div class="px-4 py-6 sm:px-0">
                <div class="bg-white shadow overflow-hidden sm:rounded-lg">
                    <div class="px-4 py-5 sm:px-6">
                        <h3 class="text-lg leading-6 font-medium text-gray-900">教学数据分析</h3>
                        <p class="mt-1 max-w-2xl text-sm text-gray-500">查看学生学习情况和常见问题统计</p>
                    </div>
                    <div class="border-t border-gray-200">
                        <div class="p-6">
                            <!-- 统计卡片 -->
                            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                                <div class="card stat-card">
                                    <div class="stat-value" id="totalQuestions">125</div>
                                    <div class="stat-label">总问题数</div>
                                </div>
                                
                                <div class="card stat-card">
                                    <div class="stat-value" id="activeStudents">42</div>
                                    <div class="stat-label">活跃学生</div>
                                </div>
                                
                                <div class="card stat-card">
                                    <div class="stat-value" id="knowledgePoints">86</div>
                                    <div class="stat-label">知识点数</div>
                                </div>
                                
                                <div class="card stat-card">
                                    <div class="stat-value" id="avgRating">4.2</div>
                                    <div class="stat-label">平均评分</div>
                                </div>
                            </div>
                            
                            <!-- 常见问题和知识点掌握情况 -->
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                                <div class="bg-blue-50 p-4 rounded-lg">
                                    <div class="flex items-center justify-between mb-3">
                                        <h4 class="text-md font-medium text-gray-900">学生常见问题</h4>
                                        <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">实时更新</span>
                                    </div>
                                    <ul class="space-y-2">
                                        <li class="flex items-start">
                                            <span class="flex-shrink-0 w-6 h-6 bg-red-100 text-red-800 rounded-full flex items-center justify-center text-xs font-medium mr-2">1</span>
                                            <span class="text-gray-700">如何解一元二次方程？</span>
                                            <span class="ml-auto text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded">数学</span>
                                        </li>
                                        <li class="flex items-start">
                                            <span class="flex-shrink-0 w-6 h-6 bg-orange-100 text-orange-800 rounded-full flex items-center justify-center text-xs font-medium mr-2">2</span>
                                            <span class="text-gray-700">英语时态有哪些？</span>
                                            <span class="ml-auto text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded">英语</span>
                                        </li>
                                        <li class="flex items-start">
                                            <span class="flex-shrink-0 w-6 h-6 bg-yellow-100 text-yellow-800 rounded-full flex items-center justify-center text-xs font-medium mr-2">3</span>
                                            <span class="text-gray-700">牛顿第二定律是什么？</span>
                                            <span class="ml-auto text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded">物理</span>
                                        </li>
                                        <li class="flex items-start">
                                            <span class="flex-shrink-0 w-6 h-6 bg-green-100 text-green-800 rounded-full flex items-center justify-center text-xs font-medium mr-2">4</span>
                                            <span class="text-gray-700">化学方程式如何配平？</span>
                                            <span class="ml-auto text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded">化学</span>
                                        </li>
                                        <li class="flex items-start">
                                            <span class="flex-shrink-0 w-6 h-6 bg-blue-100 text-blue-800 rounded-full flex items-center justify-center text-xs font-medium mr-2">5</span>
                                            <span class="text-gray-700">函数的单调性如何判断？</span>
                                            <span class="ml-auto text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded">数学</span>
                                        </li>
                                    </ul>
                                </div>
                                
                                <div class="bg-green-50 p-4 rounded-lg">
                                    <div class="flex items-center justify-between mb-3">
                                        <h4 class="text-md font-medium text-gray-900">知识点掌握情况</h4>
                                        <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">本周数据</span>
                                    </div>
                                    <div class="space-y-3">
                                        <div>
                                            <div class="flex justify-between mb-1">
                                                <span class="text-sm font-medium text-gray-700">数学</span>
                                                <span class="text-sm font-medium text-gray-700">85%</span>
                                            </div>
                                            <div class="w-full bg-gray-200 rounded-full h-2">
                                                <div class="bg-blue-600 h-2 rounded-full" style="width: 85%"></div>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="flex justify-between mb-1">
                                                <span class="text-sm font-medium text-gray-700">英语</span>
                                                <span class="text-sm font-medium text-gray-700">72%</span>
                                            </div>
                                            <div class="w-full bg-gray-200 rounded-full h-2">
                                                <div class="bg-green-600 h-2 rounded-full" style="width: 72%"></div>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="flex justify-between mb-1">
                                                <span class="text-sm font-medium text-gray-700">物理</span>
                                                <span class="text-sm font-medium text-gray-700">68%</span>
                                            </div>
                                            <div class="w-full bg-gray-200 rounded-full h-2">
                                                <div class="bg-yellow-600 h-2 rounded-full" style="width: 68%"></div>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="flex justify-between mb-1">
                                                <span class="text-sm font-medium text-gray-700">化学</span>
                                                <span class="text-sm font-medium text-gray-700">76%</span>
                                            </div>
                                            <div class="w-full bg-gray-200 rounded-full h-2">
                                                <div class="bg-purple-600 h-2 rounded-full" style="width: 76%"></div>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="flex justify-between mb-1">
                                                <span class="text-sm font-medium text-gray-700">历史</span>
                                                <span class="text-sm font-medium text-gray-700">81%</span>
                                            </div>
                                            <div class="w-full bg-gray-200 rounded-full h-2">
                                                <div class="bg-red-600 h-2 rounded-full" style="width: 81%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 学生问题统计 -->
                            <div class="bg-white p-4 rounded-lg border mb-6">
                                <div class="flex items-center justify-between mb-4">
                                    <h4 class="text-md font-medium text-gray-900">学生问题统计</h4>
                                    <div class="flex space-x-2">
                                        <button class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded hover:bg-blue-200">
                                            <i class="fas fa-download mr-1"></i>导出数据
                                        </button>
                                        <button class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded hover:bg-gray-200">
                                            <i class="fas fa-sync-alt mr-1"></i>刷新
                                        </button>
                                    </div>
                                </div>
                                <div class="overflow-x-auto">
                                    <table class="min-w-full divide-y divide-gray-200">
                                        <thead class="bg-gray-50">
                                            <tr>
                                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">科目</th>
                                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">问题数量</th>
                                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">掌握率</th>
                                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">趋势</th>
                                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                            </tr>
                                        </thead>
                                        <tbody class="bg-white divide-y divide-gray-200">
                                            <tr>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">数学</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">42</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                        85%
                                                    </span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                    <span class="text-green-600">↑ 12%</span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                    <button class="text-blue-600 hover:text-blue-900 mr-2">
                                                        <i class="fas fa-chart-line"></i>
                                                    </button>
                                                    <button class="text-gray-600 hover:text-gray-900">
                                                        <i class="fas fa-ellipsis-h"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">英语</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">38</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                                        72%
                                                    </span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                    <span class="text-red-600">↓ 5%</span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                    <button class="text-blue-600 hover:text-blue-900 mr-2">
                                                        <i class="fas fa-chart-line"></i>
                                                    </button>
                                                    <button class="text-gray-600 hover:text-gray-900">
                                                        <i class="fas fa-ellipsis-h"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">物理</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">26</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                                        68%
                                                    </span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                    <span class="text-green-600">↑ 8%</span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                    <button class="text-blue-600 hover:text-blue-900 mr-2">
                                                        <i class="fas fa-chart-line"></i>
                                                    </button>
                                                    <button class="text-gray-600 hover:text-gray-900">
                                                        <i class="fas fa-ellipsis-h"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">化学</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">19</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                        76%
                                                    </span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                    <span class="text-yellow-600">→ 0%</span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                    <button class="text-blue-600 hover:text-blue-900 mr-2">
                                                        <i class="fas fa-chart-line"></i>
                                                    </button>
                                                    <button class="text-gray-600 hover:text-gray-900">
                                                        <i class="fas fa-ellipsis-h"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">历史</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">20</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                        81%
                                                    </span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                    <span class="text-green-600">↑ 3%</span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                    <button class="text-blue-600 hover:text-blue-900 mr-2">
                                                        <i class="fas fa-chart-line"></i>
                                                    </button>
                                                    <button class="text-gray-600 hover:text-gray-900">
                                                        <i class="fas fa-ellipsis-h"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            
                            <!-- 知识点分析 -->
                            <div class="bg-white p-4 rounded-lg border">
                                <div class="flex items-center justify-between mb-4">
                                    <h4 class="text-md font-medium text-gray-900">薄弱知识点分析</h4>
                                    <div class="text-sm text-gray-500">掌握率低于70%的知识点</div>
                                </div>
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                    <div class="border rounded-lg p-4 hover:shadow-md transition-shadow">
                                        <div class="flex items-start">
                                            <div class="flex-shrink-0 w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
                                                <i class="fas fa-exclamation-circle text-red-600"></i>
                                            </div>
                                            <div class="ml-3">
                                                <h5 class="font-medium text-gray-900">化学方程式配平</h5>
                                                <p class="text-sm text-gray-500 mt-1">掌握率: 45%</p>
                                                <div class="mt-2">
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                                        化学
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="border rounded-lg p-4 hover:shadow-md transition-shadow">
                                        <div class="flex items-start">
                                            <div class="flex-shrink-0 w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
                                                <i class="fas fa-exclamation-circle text-orange-600"></i>
                                            </div>
                                            <div class="ml-3">
                                                <h5 class="font-medium text-gray-900">动词时态</h5>
                                                <p class="text-sm text-gray-500 mt-1">掌握率: 58%</p>
                                                <div class="mt-2">
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
                                                        英语
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="border rounded-lg p-4 hover:shadow-md transition-shadow">
                                        <div class="flex items-start">
                                            <div class="flex-shrink-0 w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
                                                <i class="fas fa-exclamation-circle text-yellow-600"></i>
                                            </div>
                                            <div class="ml-3">
                                                <h5 class="font-medium text-gray-900">电磁感应</h5>
                                                <p class="text-sm text-gray-500 mt-1">掌握率: 62%</p>
                                                <div class="mt-2">
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                                        物理
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 检查用户是否已登录且为教师角色
            if (!checkTeacherAuthentication()) {
                return;
            }
            
            // 绑定退出登录按钮事件
            document.getElementById('logoutBtn').addEventListener('click', handleLogout);
            
            // 绑定刷新按钮事件
            const refreshBtns = document.querySelectorAll('button .fa-sync-alt');
            refreshBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    refreshData();
                });
            });
            
            // 绑定导出数据按钮事件
            const exportBtns = document.querySelectorAll('button .fa-download');
            exportBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    exportData();
                });
            });
            
            // 模拟数据更新
            updateStats();
        });
        
        // 检查教师身份验证
        function checkTeacherAuthentication() {
            const user = localStorage.getItem('user');
            const token = localStorage.getItem('token');
            
            if (!user || !token) {
                alert('请先登录');
                window.location.href = 'login.html';
                return false;
            }
            
            // 检查用户角色是否为教师
            const userData = JSON.parse(user);
            if (userData.role !== 'teacher') {
                alert('您没有权限访问教师页面');
                window.location.href = 'login.html';
                return false;
            }
            
            return true;
        }
        
        // 处理退出登录
        function handleLogout() {
            // 清除本地存储的用户信息
            localStorage.removeItem('token');
            localStorage.removeItem('user');
            
            // 跳转到登录页面
            alert('已退出登录');
            window.location.href = 'login.html';
        }
        
        // 刷新数据
        function refreshData() {
            // 显示加载状态
            const refreshBtn = document.querySelector('.fa-sync-alt');
            const originalClass = refreshBtn.className;
            refreshBtn.className = 'fas fa-spinner fa-spin';
            
            // 模拟数据刷新
            setTimeout(() => {
                refreshBtn.className = originalClass;
                updateStats();
                alert('数据已刷新');
            }, 1000);
        }
        
        // 导出数据
        function exportData() {
            alert('数据导出功能将在后续版本中实现');
        }
        
        // 更新统计数据
        function updateStats() {
            // 模拟更新统计数据
            document.getElementById('totalQuestions').textContent = Math.floor(Math.random() * 20) + 115;
            document.getElementById('activeStudents').textContent = Math.floor(Math.random() * 10) + 38;
            document.getElementById('knowledgePoints').textContent = Math.floor(Math.random() * 10) + 80;
            document.getElementById('avgRating').textContent = (Math.random() * 1 + 4).toFixed(1);
        }
        
        // 查看详细趋势
        function viewTrend(subject) {
            alert(`将显示${subject}科目的详细趋势图表`);
        }
    </script>
</body>
</html>